<!-- components/CategoryTabs.vue -->
<template>
  <div class="bg-white border-b border-gray-medium overflow-x-auto scrollbar-hide">
    <div class="flex px-4 py-3 space-x-6 min-w-max">
      <button v-for="(category, index) in categories" :key="index" class="px-2 py-1 transition-colors"
        :class="currentCategory === index ? 'text-primary font-medium border-b-2 border-primary' : 'text-gray-dark hover:text-primary'"
        @click="handleCategoryClick(index)">
        {{ category.label }}
      </button>
    </div>
  </div>
</template>

<script>
import { listLabel } from "@/api/demo/label";

export default {
  name: 'CategoryTabs',
  data() {
    return {
      currentCategory: 0,
      categories: [{id:0,label: '推荐'}, {id:0,label:"真实反馈"}]
    }
  },
  created() {
    this.getLabelList()
  },
  methods: {
    handleCategoryClick(index) {
      this.currentCategory = index
      this.$emit('category-changed', this.categories[index])
    },
    getLabelList() {
      listLabel({ pageNum: 1, pageSize: 100 }).then(response => {
        response.rows.forEach(row => {
          this.categories.push({id:row.id,label:row.label})
        });

      });
    },
  }
}
</script>